<template>
    <div>
        <div class="header">
            <div class="logo">
                <img src="@/assets/images/header/logo02.svg" alt="" srcset="">
                <img src="@/assets/images/header/logo01.svg" alt="" srcset="">
            </div>
            <div class="time">
                <span class="tiem_l">{{ nowTime }}</span>
                <span class="time_r">{{ nowDate }}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            nowTime: '',
            nowDate: '',
        }
    },
    components: {

    },
    mounted() {
        this.getTime()
    },
    methods: {
        getTime() {
            setInterval(() => {
                let date = new Date()
                this.nowTime = date.toLocaleTimeString()
                this.nowDate = date.toLocaleDateString().replaceAll('/', '-')
            }, 1000)
        }
    },
}

</script>
<style lang="scss" scoped>
.header {
    height: 80px;
    // background: url('@/assets/images/header/header-bg.png') ;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;

    .logo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;

        img:last-child {
            position: absolute;
            top: 10px;
            left: -4px;
            z-index: -999;
        }
    }

    .time {
        position: absolute;
        right: 30px;
        top: 20px;

        span {
            margin-left: 20px;
        }

        .tiem_l {
            /** 文本1 */
            font-size: 32px;
            font-weight: 700;
            letter-spacing: 1px;
            line-height: 32px;
            color: rgba(227, 244, 252, 1);
        }

        .time_r {
            /** 文本1 */
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 1px;
            line-height: 16px;
            color: rgba(227, 244, 252, 0.5);


        }
    }
}
</style>